import * as React from 'react';
import { connect } from 'react-redux';
import { Icon, Dropdown, Menu } from 'antd';
//import auth from '../../../common/auth';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadablePopToSelect = LoadableComponent(() => import('pages/attachment/PopToSelect'));
const LoadableUploadBasic = LoadableComponent(() => import('components/common/UploadBasic'));

interface DraggerProps {
  onUploading?: (obj: any) => any;
  onError?: (obj: any) => any;
  onDone: (obj: any) => any;
  children?: any;
  selectedItems: any[];
  accept?: string;
  title?: string;
  selectMax?: number;
}
interface DraggerState {
  popupToSelectShown: boolean;
}

class Dragger extends React.Component<DraggerProps, DraggerState> {
  static defaultProps: DraggerProps = {
    onUploading: () => {},
    onError: () => {},
    onDone: () => {},
    children: null,
    accept: '',
    title: '点击上传',
    selectedItems: [],
    selectMax: 1,
  };

  constructor(props: DraggerProps) {
    super(props);

    this.state = {
      popupToSelectShown: false,
    };
  }

  handleShowPopupToSelect = () => {
    this.setState({
      popupToSelectShown: true,
    });
  };

  handleHidePopupToSelect = () => {
    this.setState({
      popupToSelectShown: false,
    });
  };

  handleAttachmentSelected = () => {
    const { onDone, selectedItems } = this.props;

    this.handleHidePopupToSelect();

    // for same interface.
    onDone({
      files: selectedItems,
    });
  };

  handleUploadDone = (attachment: any) => {
    const { onDone } = this.props;

    onDone({
      files: [attachment],
    });
  };

  render() {
    const { children, title, accept, selectMax } = this.props;
    const menu = (
      <Menu>
        <Menu.Item key="0">
          <a href="javascript:void 0">
            <LoadableUploadBasic
              type="onlyText"
              listType="text"
              multiple={selectMax && selectMax > 1}
              target={accept}
              onSelected={this.handleUploadDone}
            />
          </a>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="1">
          <a onClick={this.handleShowPopupToSelect} href="javascript: void 0">
            <Icon type="folder" />
            从附件选择
          </a>
        </Menu.Item>
      </Menu>
    );

    if (children) {
      return (
        <div>
          <Dropdown overlay={menu} trigger={['click']}>
            {children}
          </Dropdown>
          {this.state.popupToSelectShown && (
            <LoadablePopToSelect
              loading={false}
              ownItems={[]}
              selectMax={selectMax}
              selectType={accept}
              onOk={this.handleAttachmentSelected}
              onCancel={this.handleHidePopupToSelect}
            />
          )}
        </div>
      );
    }

    // default render stuff.
    return (
      <div className="ant-upload ant-upload-drag">
        <Dropdown overlay={menu} trigger={['click']}>
          <span className="ant-upload ant-upload-btn">
            <div className="ant-upload-drag-container">
              <p className="ant-upload-drag-icon">
                <i className="anticon anticon-inbox" />
              </p>
              <p className="ant-upload-text">{title}</p>
            </div>
          </span>
        </Dropdown>
        {this.state.popupToSelectShown && (
          <LoadablePopToSelect
            loading={false}
            ownItems={[]}
            selectType={accept}
            onOk={this.handleAttachmentSelected}
            onCancel={this.handleHidePopupToSelect}
          />
        )}
      </div>
    );
  }
}

function mapStateToProps(state: any) {
  const { selectedItems } = state.attachment;
  return {
    selectedItems,
  };
}
export default connect(mapStateToProps)(Dragger);
